<template>
  <!-- 父级添加按钮 -->
  <div class="tools-div">
    <el-button type="success" size="small" @click="addShow">添 加</el-button>
  </div>
  <!-- 添加对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
    <el-form label-width="120px">
      <el-form-item label="菜单标题">
        <el-input v-model="sysMenu.title" />
      </el-form-item>
      <el-form-item label="路由名称">
        <el-input v-model="sysMenu.component" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="sysMenu.sortValue" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="sysMenu.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 显示列表 -->
  <el-table
    :data="list"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    default-expand-all
  >
    <el-table-column prop="title" label="菜单标题" />
    <el-table-column prop="component" label="路由名称" />
    <el-table-column prop="sortValue" label="排序" />
    <el-table-column prop="status" label="状态" #default="scope">
      {{ scope.row.status == 1 ? '正常' : '停用' }}
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" />

    <el-table-column label="操作" align="center" width="280" #default="scope">
      <el-button type="success" size="small" @click="addShow(scope.row)">
        添加下级节点
      </el-button>
      <el-button type="primary" size="small" @click="editShow(scope.row)">
        修改
      </el-button>
      <el-button type="danger" size="small" @click="remove(scope.row.id)">
        删除
      </el-button>
    </el-table-column>
  </el-table>
</template>
<script setup>  
import { ref, onMounted } from 'vue'
import { updateMenu, showAllMenu, removeById, addMenu } from '@/api/sysMenu'
import { ElMessage,ElMessageBox } from 'element-plus'

//删除
const remove=(id)=>{
  ElMessageBox.confirm(
    '确定要删除吗',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  )
    .then(async () => {
        // 用户确定 根据id 向后段发送请求
        const {code,message}= await removeById(id)
        // 成功后给出提示信息,并刷新数据
        if(code===200){
            ElMessage({
            type: 'success',    
            message: ' 删除成功',
        })
        dialogVisible.value=false
        //刷新数据
        fetchData()
        }else{ //如果用户删除包含子菜单的父级菜单,需要给出提示信息,禁止用户删除

        ElMessage.error(message)
        }
  
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}
//显示修改对话框 并回显数据
const editShow=(row)=>{
     dialogTitle.value="修改"
     dialogVisible.value=true
     //数据回显示
     sysMenu.value=row

}

//显示添加按钮
const addShow = (row) => {
   sysMenu.value={}
   sysMenu.value.status=1
   sysMenu.value.sortValue=1
    if(!row.id){ // 没有传过来说明添加的是父
      // sysMenu.value.parentId=0
      dialogTitle.value="添加父级菜单"
    }else{
      dialogTitle.value=`给(${row.title}) 添加子菜单`
      sysMenu.value.parentId=row.id

    }
    dialogVisible.value = true
   
}

//新增方法
const savaSysMenu = async () => {
  const { code } = await addMenu(sysMenu.value)
  if (code === 200) {
    ElMessage.success('添加成功')
  }
  //取消对话框显示
  dialogVisible.value = false
  //刷新数据
  fetchData()
}
//修改方法
const editSysMenu=async()=>{
     const {code}=await updateMenu(sysMenu.value)
     if(code===200){
      ElMessage.success("修改成功")
     }
     //关闭对话框
     dialogVisible.value=false
     //刷新数据
     fetchData()
     
}
// 提交新增或者修改的对话框

const saveOrUpdate = () => {
  if (sysMenu.value.id) {
    //有id说明是修改
    editSysMenu()
  } else {
    if(!sysMenu.value.parentId){
      sysMenu.value.parentId=0
    }
    //没有id说明是新增
    savaSysMenu()
  }
}

//菜单数据模型, 定义后,新增才会显示具体要填写的信息
const defalutMenuFrom = {
  parentId: 0,
  id: '',
  title: '',
  component: '',
  sortValue: 1,
  status: 1,
}

const sysMenu = ref(defalutMenuFrom)
//控制添加对话框的显示
const dialogVisible = ref(false)
//添加对话框标题的显示
const dialogTitle = ref('')



onMounted(() => {
  fetchData()
})
const fetchData = async () => {
  const { data } = await showAllMenu()
  list.value = data
}


//模拟数据
const list = ref([
  {
    id: 1,
    title: 'aaa',
    component: 'aaa',
    sortValue: '111',
    status: '1',
  },
  {
    id: 2,
    title: 'bbb',
    component: 'aaa',
    sortValue: '111',
    status: '1',
  },
])
</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
